<template>
	<view class="content">
		<view class="header">
			<navigator :url="item.url" hover-class="none" v-for="(item,index) in list2" :key="index">
				<view class="btnbox">
					<view class="btn">
						<view :class="['icon', 'iconfont',item.icon]"></view>
						<text class="name">{{item.name}}</text>
					</view>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</navigator>
		</view>
		<view class="header">
			<navigator :url="item.url" hover-class="none" v-for="(item,index) in list" :key="index">
				<view class="btnbox">
					<view class="btn">
						<view :class="['icon', 'iconfont',item.icon]"></view>
						<text class="name">{{item.name}}</text>
					</view>
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</navigator>
		</view>
		<view class="logout">
			<button class="btn" @tap="tologout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import {logout} from '../../network/main.js';
	import {
		ref,
		reactive
	} from 'vue';
	const list = reactive([{
			name: '帮助中心',
			url: '/pages/setting/help',
			icon: 'icon-bangzhu',
		},
		{
			name: '关于我们',
			url: '/pages/setting/about',
			icon: 'icon-guanyu',
		},
		{
			name: '隐私政策',
			url: '/pages/setting/privacy',
			icon: 'icon-icon_A',
		},
		{
			name: '供应商协议',
			url: '/pages/setting/agreement',
			icon: 'icon-protocol',
		},
	])
	const list2 = ref([{
		name: '修改密码',
		url: '/pages/setting/changePassword',
		icon: 'icon-mima',
	}])
	const tologout = () => {
		logout({}).then(res=>{
			uni.clearStorageSync()
			uni.reLaunch({
				url: '/pages/user/login'
			})
		})
	}
</script>

<style lang="scss">
	.content {
		border-top: 2rpx solid #f7f7f7;

		.header {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 20rpx;
			color: #333;

			.btnbox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					display: flex;
					align-items: center;
					gap: 20rpx;
					padding: 20rpx 0;

					.icon {
						color: #ffc400;
					}

					.name {
						font-size: 28rpx;
					}
				}
			}

		}

		.logout {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-top: 200rpx;

			.btn {
				width: 600rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
				background-color: #ffc400;
				font-size: 28rpx;
			}
		}
	}
</style>